<template>
    <div class="rank">
        <ul>
            <li @click="tab(i.id)" :class="rank_index == i.id ? 'active' : ''" v-for="i in arr" :key="i.id">
                {{ i.text }}
            </li>
        </ul>
        <RankItem :list_id="rank_index"></RankItem>
    </div>
</template>

<script>
import RankItem from "@/components/RankItem.vue";
export default {
    components: { RankItem },
    data() {
        return {
            arr: [
                { text: "日漫榜", id: 3 },
                { text: "国漫榜", id: 4 },
                { text: "免费榜", id: 1 },
            ],
            rank_index: 3,
        };
    },
    methods: {
        tab(x) {
            this.rank_index = x;
        },
    },
};
</script>

<style lang="scss" scoped>
.rank {
    ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    li {
        font-size: 0.8125rem;
        color: #919191;
        width: 4.375rem;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
        border-radius: 1rem;
        background: #f5f7f8;
    }
    li.active {
        color: #e85445;
        background-color: #fae6e3;
    }
}
</style>
